<template>
  <div class="form_layout" :style="contentStyle()">
    <div class="body vertical center body_sec">
      <nut-form label-position="top" ref="formRef" class="">
        <!-- 选择类型 -->
        <nut-form-item class="yh_item" :label="t('club_page_xztype')">
          <div class="select_dis">
            <nut-menu>
              <nut-menu-item
                v-model="form.gameType"
                :options="typeList"
                @change="clickChoose"
              />
            </nut-menu>
          </div>
        </nut-form-item>

        <!-- 牌局名称 -->
        <nut-form-item class="last_item" :label="t('club_page_paijuname')" prop="club_name">
          <nut-input
            v-model.trim="form.name"
            :placeholder="t('club_page_qsrpjname')"
          />
        </nut-form-item>

        <!-- 选择玩法 -->
        <div class="play_mode" v-if="form.gameType === 49">
          <label class="play_mode__label">{{ t('club_page_szgametype') }}</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes"
              :key="mode.id"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': form.playType === mode.id }"
              @click="mode.enabled ? selectMode(mode) : ''"
            >
              <span>{{ mode.label }}</span>
              <div class="play_mode_lock play_mode__item--disabled" v-if="!mode.enabled">
                <img src="/imgs/club/lock_icon.png" class="play_mode__lock_icon" />
              </div>
            </div>
          </div>
        </div>

        <!-- 买入限制 -->
        <nut-form-item class="last_item" v-if="form.gameType === 49" :label="t('club_page_mrxianzhi')">
          <nut-input
            v-model.trim="form.minTake"
            :placeholder="t('club_page_jinexx')"
          />
          <div class="h"></div>
          <nut-input
            v-model.trim="form.maxTake"
            :placeholder="t('club_page_jinesx')"
          />
        </nut-form-item>

        <!-- 最低携带金额 -->
        <nut-form-item class="last_item" v-if="form.gameType === 47" :label="t('club_page_zdxdje')">
          <div class="play_mode1">
            <div class="play_mode__container">
              <div
                v-for="mode in modes4"
                :key="mode.label"
                class="play_mode__item"
                :class="{ 'play_mode__item--active': needChip === mode.id }"
                @click="selectMode4(mode)"
              >
                <span>{{ mode.label }}</span>
              </div>
            </div>
          </div>
          <nut-input
            v-model.trim="form.needChip"
            :placeholder="t('club_page_qingsr')"
          />
          <ul class="slider_labels">
            <li class="item" v-for="(item, index) in sliderLabels" :key="index">{{ item }}</li>
          </ul>
          <div class="slider_bet">
            <nut-range v-model="needChipVal" :step="14.2857" hidden-range inactive-color="#1D1C3C"  active-color="#9E1EFF" @change="changeRange">
              <template #button>
                <div class="range_button"></div>
              </template>
            </nut-range>
          </div>
          <!-- <nut-range v-model="needChipVal" :step="14.2857" hidden-range inactive-color="#1D1C3C"  active-color="#9E1EFF" @change="changeRange">
            <template #button>
              <div class="range_button"></div>
            </template>
          </nut-range> -->
        </nut-form-item>

        <!-- 盲注/低注 -->
        <nut-form-item class="last_item" :label="form.gameType === 49 ? t('club_page_mbet') : t('club_page_dizhu')">
          <nut-input
            v-if="form.gameType === 49"
            v-model.trim="form.maxBlind"
            :placeholder="t('club_page_qsrmbet')"
          />
          <nut-input
            v-if="form.gameType === 47"
            v-model.trim="form.minBet"
            :placeholder="t('club_page_qsrdbet')"
          />
          <ul class="slider_labels">
            <li class="item" v-for="(item, index) in sliderLabels" :key="index">{{ item }}</li>
          </ul>
          <div class="slider_bet">
            <nut-range v-model="betVal" :step="14.2857" hidden-range inactive-color="#1D1C3C"  active-color="#9E1EFF" @change="changeRangeBet">
              <template #button>
                <div class="range_button"></div>
              </template>
            </nut-range>
          </div>
        </nut-form-item>

        <!-- 每桌人数 -->
        <div class="play_mode">
          <label class="play_mode__label">{{ t('club_page_meizhuorenshu') }}</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes1"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active1': form.maxPlayer === mode.label }"
              @click="selectMode1(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <!-- 开局盲注数量 -->
        <div class="play_mode1" v-if="form.gameType === 49">
          <label class="play_mode__label">{{ t('club_page_kaijushuliang') }}</label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes2"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': form.blindCount === mode.id }"
              @click="selectMode2(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <!-- 输赢规则  -->
        <div class="play_mode1" v-if="form.gameType === 47">
          <label class="play_mode__label">{{ t('club_page_sygz') }} </label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes5"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': form.playType === mode.id }"
              @click="selectMode5(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>
        
        <!-- 限注规则 -->
        <div class="play_mode1" v-if="form.gameType === 49">
          <label class="play_mode__label">{{ t('club_page_xzgz') }} <span class="details" @click="onClickDetails">详细</span></label>
          <div class="play_mode__container">
            <div
              v-for="mode in modes3"
              :key="mode.label"
              class="play_mode__item"
              :class="{ 'play_mode__item--active': form.limitBetRule === mode.id }"
              @click="selectMode3(mode)"
            >
              <span>{{ mode.label }}</span>
            </div>
          </div>
        </div>

        <div class="settings">
          <!-- 全下保险功能 -->
          <div class="settings__item" v-if="form.gameType === 49">
            <span class="settings__label">{{ t('club_page_quanxia') }}</span>
            <nut-switch 
              v-if="insuranceEnabledOption.value === 'check'" 
              v-model="form.allInsurance" 
              active-color="#1DBA8B" 
              inactive-color="#504F6F">
            </nut-switch>
          </div>
          <!-- 多次发牌 -->
          <div class="settings__item" v-if="form.gameType === 49">
            <span class="settings__label">{{ t('club_page_duoci') }}</span>
            <nut-switch 
              v-if="multiDealOption.value === 'check'" 
              v-model="form.multiDealEnabled" 
              active-color="#1DBA8B" 
              inactive-color="#504F6F">
            </nut-switch>
          </div>
          <!-- 其他规则 -->
          <div class="settings__group">
            <span class="settings__label">{{ t('club_page_qitaguize') }}</span>
            <div class="settings__options">
              <label class="settings__option">
                <input type="checkbox" v-model="form.ipLimit" />
                <span>{{ t('club_page_gps') }}</span>
              </label>
              <!-- <label class="settings__option">
                <input type="checkbox" v-model="form.isSimulatorEnabled" />
                <span>禁用模拟器</span>
              </label> -->
            </div>
          </div>
        </div>  
        
        <!-- 按钮 -->
        <div class="btn_zone flex">
          <nut-button
            class="submit_btn button_color pointer"
            :disabled="loading"
            block
            @click="onSubmit"
          >
            {{ t('btn_label_submit') }}
          </nut-button>
        </div>   
      </nut-form>
    </div>

    <!-- 详情 -->
    <Modal v-model:visible="isShowWin" :title="t(club_title)" @close="">
      <div class="popup_body">
        <p>{{ t('club_page_xiangqing1') }}</p>
        <p>{{ t('club_page_xiangqing2') }}</p>
        <p>{{ t('club_page_xiangqing3') }}</p>
        <p>{{ t('club_page_xiangqing4') }}</p>
        <div class="submit_btn">
          <Btn height="44px" width="147px" class="submit" @click="submitAc">{{ t('btnCfg_1') }}</Btn>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
import { useI18n } from "vue-i18n";
import { storeToRefs } from "pinia";
import pinia from "@/store/index";
import { User } from "@/store/user";
const { appHeight } = storeToRefs(User(pinia));
const { t } = useI18n();
import {  useRoute } from "vue-router";
const route = useRoute();

import { showToast } from "@nutui/nutui";

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

const gameClubIds = {
  dz: 49,
  pdk: 47,
}
const typeList = [
  { text: t('club_page_49'), value: gameClubIds['dz'] },
  { text: t('club_page_47'), value: gameClubIds['pdk'] },
];

const dataParams = {
  type: 1, // 牌局类型
  playType: 1, // 玩法
  clubId: 0, // 俱乐部ID 
  gameType: gameClubIds['dz'], // 游戏类型
  name: '', // 牌局名
  icon: '', // 牌局logo
  minBet: '', // 跑得快底注
  needChip: '', // 最低携带
  maxChip: '', // 最大携带
  minTake: '', // 最小买入
  maxTake: '', // 最大买入
  smallBlind: '', // 小盲
  maxBlind: '', // 大盲
  maxPlayer: 6, // 最多玩家数量
  deskCount: 1, // 桌子数量
  blindCount: 1, // 开局盲注
  limitBetRule: 1, // 限注规则
  allInsurance: false, // 全下保险功能
  multiDealEnabled: false, // 是否多次发牌
  ipLimit: true, // 是否限制ip
  // isSimulatorEnabled: true, // 是否限制模拟器
};

const form = ref(
  // 牌局表单提交
  { ...dataParams }
);

const loading = ref(false); // 是否提交中


const contentStyle = () => {
  return window.matchMedia("(display-mode: standalone)").matches ||
    window.navigator.standalone
    ? { height: `calc(${appHeight.value}px - 40px)` }
    : { height: `calc(${appHeight.value}px - 40px)` };
};

const clickChoose = (item: any) => {
  form.value.type = item;
};

const modes = ref([
  { label: t('club_page_jd'), enabled: true, id: 1 },
  { label: t('club_page_dp'), enabled: true, id: 2 },
  { label: t('club_page_aomaha'), enabled: false, id: 3 },
  { label: t('club_page_49'), enabled: false, id: 4 },
  { label: t('club_page_wuxianbet'), enabled: false, id: 5 },
]);
// 点击选择玩法
const selectMode = (mode: { id: any; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  form.value.playType = mode.id;
};

const sliderLabels = ref<number[]>([]); // 动态标签数据
const needChipVal = ref(0)
const betVal = ref(0)
const minValue = ref(0)
const maxValue = ref(0)

const fetchSliderLabels = () => {
  return new Promise<number[]>((resolve) => {
    setTimeout(() => {
      resolve([ 0, 10, 20, 50, 100, 200, 500, 1000]);
    }, 1000);
  });
};

const sliderMarks: any = ref({
  0: '0',
  14.2857: '10',
  28.5714: '20',
  42.8571: '50',
  57.1428: '100',
  71.4285: '200',
  85.7142: '500',
  99.9999: '1000',
});

const initSliderData = async () => {
  const labels = await fetchSliderLabels();
  sliderLabels.value = labels;
  minValue.value = Math.min(...sliderLabels.value);
  maxValue.value = Math.max(...sliderLabels.value);
  needChipVal.value = minValue.value;
  betVal.value = minValue.value;
};
const changeRange = (value: number) => {
  form.value.needChip = String(sliderMarks.value[value])
};
const changeRangeBet = (value: number) => {
  if(form.value.gameType === 49) {
    form.value.maxBlind = String(sliderMarks.value[value])
  } else {
    form.value.minBet = String(sliderMarks.value[value])
  }
  console.log('sliderMarks.value[value]', sliderMarks.value[value])
};



const needChip = ref(1)
// 跑快点-金额类型
const modes4 = ref([
  { label: t('club_page_zddrje'), enabled: true, id: 1 },
  { label: t('club_page_gddrje'), enabled: true, id: 2 },
])
// 点击选择金额类型
const selectMode4 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  needChip.value = mode.id;
};

// 桌人数
const modes1 = ref([
  { label: 6, enabled: true },
  { label: 9, enabled: true },
]);
// 点击选择桌人数
const selectMode1 = (mode: { label: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  form.value.maxPlayer = mode.label;
};

// 开局盲注数
const modes2 = ref([
  { label: t('club_page_dxmang'), enabled: true, id: 1 },
  { label: t('club_page_dxsmang'), enabled: true, id: 3 },
  { label: t('club_page_dxmr'), enabled: true, id: 2 },
]);
// 点击选择开局盲注数
const selectMode2 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  form.value.blindCount = mode.id;
};

// 限注规则
const modes3 = ref([
  { label: t('club_page_xianzhu'), enabled: true, id: 1 },
  { label: t('club_page_dcxianzhu'), enabled: true, id: 2 },
  { label: t('club_page_wxxianzhu'), enabled: true, id: 3 },
  { label: t('club_page_qxmoshi'), enabled: true, id: 4 },
]);
// 点击限注规则
const selectMode3 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  form.value.limitBetRule = mode.id;
};


const isShowWin = ref(false);
const club_title = ref(t('club_page_xzgz'));
// 详情 
const onClickDetails = () => {
  isShowWin.value = true
}

const submitAc = () => {
  isShowWin.value = false
}

// 输赢规则
const modes5 = ref([
  { label: t('club_page_1jying'), enabled: true, id: 1 },
  { label: t('club_page_quany'), enabled: true, id: 2 },
]);
// 点击输赢规则
const selectMode5 = (mode: { id: number; enabled: boolean }) => {
  if (!mode.enabled) {
    return;
  }
  form.value.playType = mode.id;
};

// 用于判断是否显示开关的选项
const insuranceEnabledOption = ref({ value: 'check' });
const multiDealOption = ref({ value: 'check' });
const formRef = ref()
const onSubmit = () => {
  handleSubmit();
};

const validateFormFields = (formValues: any) => {
  // 根据 gameType 动态定义必填字段
  const requiredFields = [
    { field: 'name', name: t('club_page_paijuname') }, // 公共字段
    ...(formValues.gameType === 49
      ? [
          { field: 'minTake', name: t('club_page_minpay') },
          { field: 'maxTake', name: t('club_page_maxpay') },
          { field: 'maxBlind', name: t('club_page_mbet') },
        ]
      : formValues.gameType === 47
      ? [
          { field: 'needChip', name: t('club_page_xiedaijine') },
          { field: 'minBet', name: t('club_page_dizhu') },
        ]
      : []),
  ];
  // 检查必填字段
  for (const field of requiredFields) {
    if (!formValues[field.field] || formValues[field.field] === '') {
      return { isValid: false, message: t('club_page_bunengweikong', {name: field.name}) };
    }
  }

  // 校验金额是否为有效数字
  const checkAmountValid = (amount: any) => {
    const num = Number(amount);
    return (
      !isNaN(num) && // 是数字
      num >= 0 && // 是非负数
      /^\d+(\.\d{1,2})?$/.test(amount) 
    );
  };

  // 校验金额规则（仅当 gameType 为 49 或 47 时需要）
  if (formValues.gameType === 49 || formValues.gameType === 47) {
    const { minTake, maxTake, minBet, maxBlind, needChip } = formValues;

    if (formValues.gameType === 49) {
      if (!checkAmountValid(minTake)) {
        return { isValid: false, message: t('club_page_jiaoyan1') };
      }
      if (!checkAmountValid(maxTake)) {
        return { isValid: false, message: t('club_page_jiaoyan2') };
      }
      if (Number(maxTake) < Number(minTake)) {
        return { isValid: false, message: t('club_page_jiaoyan3') };
      }
      if (!checkAmountValid(maxBlind)) {
        return { isValid: false, message: t('club_page_jiaoyan4') };
      }
    } else if(formValues.gameType === 47) {
      if (!checkAmountValid(needChip)) {
        return { isValid: false, message: t('club_page_jiaoyan5') };
      }
      if (!checkAmountValid(minBet)) {
        return { isValid: false, message: t('club_page_jiaoyan5') };
      }
    }
    // if (!checkAmountValid(maxBlind)) {
    //   return { isValid: false, message: t('club_page_jiaoyan4') };
    // }
    
  }
  return { isValid: true, message: '' };
};

const handleSubmit = () => {
  const validationResult = validateFormFields(form.value);
  if (!validationResult.isValid) {
    // 校验失败提示信息
    return showToast.text(validationResult.message)
  }
  const req:any = NetPacket.req_room_create();
  req.type = form.value.type
  req.play_type = form.value.playType
  req.club_id = form.value.clubId
  req.game_type = form.value.gameType
  req.name = form.value.name
  req.icon = form.value.icon
  req.min_bet = Number(form.value.minBet) || 0
  req.need_chip = Number(form.value.needChip) || 0
  req.max_chip = Number(form.value.maxChip) || 0
  req.min_take = Number(form.value.minTake) || 0
  req.max_take = Number(form.value.maxTake) || 0
  req.small_blind = Number(form.value.smallBlind) || 0
  req.max_blind = Number(form.value.maxBlind) || 0
  req.max_player = form.value.maxPlayer
  req.desk_count = form.value.deskCount
  req.ip_limit = form.value.ipLimit ? 1 : 0
  // req.isSimulatorEnabled = form.value.isSimulatorEnabled ? 1 : 0
  const allInsurance = form.value.allInsurance ? 1 : 0
  const multiDealEnabled = form.value.multiDealEnabled ? 1 : 0
  // TODO 复查类型
  req.extra1 = form.value.gameType == gameClubIds['dz'] ? [
    req.min_take, // 最小买入
    req.max_take, // 最大买入
    form.value.limitBetRule, // 限注规则
    req.play_type, // 玩法
    form.value.blindCount, // 开局盲注数量
    allInsurance, // 全下保险功能
    multiDealEnabled // 多发牌
  ] : [req.play_type]
  req.extra2 = []
  req.extra3 = []
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_operate",
    callback: createRoomHandle,
  });
}

// 修改建俱乐部返回
const createRoomHandle = (res: any) => {
  const tipStr: any = {
    'CREATE_SUCCESS': t('club_page_jlbcjcg'),
    'ERROR_OPERATION_FAILED': t('club_page_jlbcjsb'),
    'ERROR_NO_PERMISSION': t('club_page_noquanxian')
  };
  if (res.result === 0) {
    showToast.text(tipStr[res.result])
  } else {
    showToast.text(tipStr[res.result])
  }
};

watch(
  () => form.value.minBet,
  (newVal) => {
    const matchingKey = Object.keys(sliderMarks.value).find(
      (key) => sliderMarks.value[key] === newVal
    );
    if (matchingKey) {
      betVal.value = parseFloat(matchingKey);
    } else {
      betVal.value = 0;
    }
  }
);

watch(
  () => form.value.maxBlind,
  (newVal) => {
    const matchingKey = Object.keys(sliderMarks.value).find(
      (key) => sliderMarks.value[key] === newVal
    );
    if (matchingKey) {
      betVal.value = parseFloat(matchingKey);
    } else {
      betVal.value = 0;
    }
  }
);

watch(
  () => form.value.needChip,
  (newVal) => {
    const matchingKey = Object.keys(sliderMarks.value).find(
      (key) => sliderMarks.value[key] === newVal
    );
    if (matchingKey) {
      needChipVal.value = parseFloat(matchingKey);
    } else {
      needChipVal.value = 0;
    }
  }
);


onMounted(() => {
  const { club_id } = route.query;
  form.value.clubId = Number(club_id)
  initSliderData();
});

onBeforeUnmount(() => {
});
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.r_color {
  color: #e43939;
}

.popup_body {
  padding: 17px 12px;
  p {
    color: #FFF;
    font-family: "PingFang SC";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 12px;
  }
  .submit_btn {
    display: flex;
    justify-content: center;
  }
}

.form_layout {
  color: #fff;
  overflow: auto;

  .body {
    padding: 24px 14px;

    form {
      :deep(.nut-cell-group__wrap) {
        box-shadow: none;
        background: none;
        margin: 0;

        .nut-cell {
          background: none;
          padding: 0 !important;
          margin-bottom: 16px;
          &.last_item {
            margin-bottom: 10px;
            .h {
              margin-bottom: 10px;
            }
            .slider_labels {
              width: 347px;
              display: grid;
              grid-template-columns: repeat(8, 1fr);
              margin: 10px auto 0;

              .item {
                color: #A8A8CA;
                font-size: 12px;
                font-weight: 400;
                text-align: center;
              }
            }
            .nut-range-container {
              width: 90%;
              height: 8px;
              margin: 0 auto;
            }
          }
          &::after {
            border: none;
          }

          &.nut-form-item {
            .nut-form-item__label {
              padding-bottom: 8px;
              color: #fff;
              font-size: 14px;
              // font-weight: 500;
            }
            .nut-input,
            .select_dis {
              width: 100%;
              background: #1d1c3c;
              border: 1px solid #333260;
              box-shadow: 0.5px 0.5px 1px 0 #333260 inset;
              border-radius: 8px;
              padding: 9px 10px;

              .s-icon {
                width: 24px;
                height: 24px;
                background: url(/imgs/inputSuffix.webp) center no-repeat;
                background-size: 100%;
                transition: 0.3s;
              }

              &.active {
                .s-icon {
                  transform: rotate(180deg);
                }
              }
              .nut-menu__title-text {
                padding: 0;
              }
            }

            .usdt_box {
              justify-content: space-between;
              margin-top: 10px;

              .button {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
  }

  .body_sec {

    .yh_item {
      :deep(.n-form-item-blank) {
        display: block;
      }

      .choose_yh {
        font-size: 14px;
        color: #fff;
        min-height: 100px;
        padding: 10px;
        background: #1d1c3c;
        border-radius: 0 0 8px 8px;

        > div {
          margin-bottom: 5px;
        }
      }

      :deep(.nut-menu) {
        .nut-menu__bar {
          background: transparent !important;
        }

        .nut-icon {
          color: #a8a8ca;
        }
      }
    }
    .play_mode {
      // margin-top: 20px;

      .play_mode__label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode__container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode__item {
        width: calc(33.33% - 10px);
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        font-size: 14px;
        color: #A8A8CA;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        flex: 0 0 calc(33.33% - 10px);

        &--active {
          background: linear-gradient(89deg, #68B1FF -5.33%, #1F6BDE 84.84%), linear-gradient(170deg, #AAD3FF 21.77%, #75ACFF 74.41%), var(---, #1D1C3C);
          box-shadow: 0.5px 0.5px 1px 0px #5AA4FF inset;
          color: #fff;
        }
        &--active1 {
          background: var(---, linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%));
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }

        &--disabled {
          background: rgba(90, 90, 90, .5);
          color: #A8A8CA;
          cursor: not-allowed; /* 禁用时显示禁用状态 */
        }
      }
      .play_mode_lock {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translateY(-50%);

        .play_mode__lock_icon {
          width: 24px;
          height: 24px;
          font-size: 16px;
          vertical-align: middle;
        }
      }
      
    }

    .play_mode1 {
      // margin-top: 20px;
      position: relative;
      .details {
        position: absolute;
        right: 0;
        top: 0;
        color: #5BD9FF;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 14px; /* 100% */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
      }

      .play_mode__label {
        display: block;
        margin-bottom: 10px;
        color: #fff;
        font-size: 14px;
      }

      .play_mode__container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 24px;
      }

      .play_mode__item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 8px;
        background: #1D1C3C;
        box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
        color: #A8A8CA;
        font-size: 14px;
        font-weight: 400;
        padding: 0 24px;

        &--active {
          background: var(---, linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%));
          box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
          color: #fff;
        }
      }
    }

    .settings {
      display: flex;
      flex-direction: column;
      gap: 16px;
      color: #fff;

      &__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &__label {
        font-size: 14px;
      }

      &__toggle {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 20px;

        input {
          opacity: 0;
          width: 0;
          height: 0;
        }

        &__switch {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ccc;
          border-radius: 20px;
          transition: background-color 0.3s;

          &::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
          }
        }

        input:checked + &__switch {
          background-color: #3b82f6;

          &::before {
            transform: translateX(14px);
          }
        }
      }

      &__group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      &__options {
        display: flex;
        gap: 16px;

        &__option {
          display: flex;
          align-items: center;
          gap: 8px;

          input[type="checkbox"]:checked {
            accent-color: #3b82f6;
          }
          
          :deep(input[type="checkbox"]) {
            /* 隐藏默认样式 */
            appearance: none;
            width: 16px;
            height: 16px;
            margin: 0;
            border: 1px solid white; /* 默认边框为白色 */
            background-color: transparent; /* 默认背景为透明 */
          }
        }
      }
    }

    .btn_zone {
      .submit_btn {
        margin: 32px auto 8px;
        border: 0;
        width: 319px;
        height: 44px;
        color: #fff;
        border-radius: 8px;

        &.fixed_bg {
          background-size: 100% 112%;
        }
      }
    }

    // .slider_container {
    //   position: relative;
    //   width: 100%;
    //   height: 40px;
    //   border-radius: 8px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: flex-start;

    //   .slider {
    //     width: 100%;
    //     height: 6px;
    //     background: linear-gradient(90deg, #7b5cf5, #9e41e5);
    //     border-radius: 3px;
    //     position: relative;

    //     .slider_labels {
    //       display: flex;
    //       justify-content: space-between;
    //       position: absolute;
    //       width: 100%;
    //       top: 10px;
    //       z-index: 96;
    //     }

    //     .slider_underline {
    //       position: absolute;
    //       bottom: 0;
    //       left: 0;
    //       z-index: 99;
    //       width: 100%;
    //       height: 2px;
    //       background-color: #9e41e5;
    //       opacity: 0.3;
    //     }

    //     .slider_thumb {
    //       position: absolute;
    //       width: 20px;
    //       height: 20px;
    //       background-color: white;
    //       border-radius: 50%;
    //       border: 3px solid #9e41e5;
    //       top: 50%;
    //       transform: translateY(-50%);
    //       cursor: pointer;
    //       transition: background-color 0.3s ease;
    //     }

    //     .slider_thumb:hover {
    //       background-color: #7b5cf5;
    //     }
    //   }
    // }
  }
  
}

// 选择优惠
:deep(.nut-overlay) {
  top: 15px;
  background: rgba(0, 0, 0, 0.1);
}

:deep(.nut-menu) {
  .nut-popup {
    width: 347px;
    left: 14px;
    top: 15px;
    background: #1d1c3c;
    border-radius: 8px;

    * {
      color: #fff;
    }
    .nut-menu-item__content {
      padding: 0;
      .nut-menu-item__option {
        height: 48px;
        padding: 0 14px;
        border-bottom: 0.5px solid #333260;
        &.active {
          background: #333260;
        }
      }
    }
  }
}


.custom_mark {
  color: white;
  font-size: 12px;
  text-align: center;
  display: inline-block;
  width: 30px;
  transform: translateX(-50%);
}

.range_button {
  width: 16px;
  height: 16px;
  background: url(/imgs/club/rangeBtn.png) no-repeat;
  background-size: contain;
}
:deep(.nut-range::before) {
  background: none;
}
</style>